<template>
	<view>
		<view :class="is_son==0?'cardBox':'cardBox_son'" style="margin-top: 0rpx;">
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao">
					<span class="biao_span">|</span> 
					<text style="font-size: 32rpx;">{{text.order_no}} : {{order.orderInfo.order_no}} </text> 
				</view>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<view class="cardTitle" style="font-size: 28rpx;margin-top: 10rpx;">{{text.order_type}} : {{order_type}}</view>	
			</view>
			
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao">
					<span class="biao_span">|</span> 
					<text style="font-size: 32rpx;">{{text.peifu}} </text> 
				</view>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<view class="cardTitle" style="font-size: 28rpx;margin-top: 10rpx;">{{text.baozhengjin}} : {{afterSalesRecord.compensate}}%</view>	
			</view>
			
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao">
					<span class="biao_span">|</span> 
					<text style="font-size: 32rpx;">{{text.afterReason}} </text> 
				</view>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<block v-if="lang==='zh'">{{afterSalesRecord.application_description}}</block>
				<block v-if="lang==='ru'">{{afterSalesRecord.application_description_ru}}</block>
			</view>
			
			
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;" v-if="afterSalesRecord.images&&afterSalesRecord.images.length!=0">
				
				<image v-if="is_son==0" :src="item.url" class="order_img" v-for="(item,index) in afterSalesRecord.images" :key="index" style="margin:0rpx 3%;margin-top: 20rpx;float: left;"></image>
				<image v-if="is_son==1" :src="IMAGE_URL+item" class="order_img" v-for="(item,index) in afterSalesRecord.images" :key="index" style="margin:0rpx 3%;margin-top: 20rpx;float: left;"></image>
				
				<view style="clear: both;"></view>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;" v-if="afterSalesRecord.file&&afterSalesRecord.file.length!=0">
				<view v-if="is_son==0" v-for="(item,index) in afterSalesRecord.file" :key="index"  style="padding: 5px 10px;" class="downLoad" @click="downLoadFile(item.url)">
					<text  style="color: #008aff;">{{ item.url.substring(item.url.length, item.url.length - 20) }}</text>
				</view>
				<view v-if="is_son==1" v-for="(item,index) in afterSalesRecord.file" :key="index"  style="padding: 5px 10px;" class="downLoad" @click="downLoadFile(IMAGE_URL+item)">
					<text  style="color: #008aff;">{{ item.substring(item.length, item.length - 20) }}</text>
				</view>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;" v-if="afterSalesRecord.video&&afterSalesRecord.video.length!=0">
				<view  v-for="(item,index) in afterSalesRecord.video" :key="index"  style="margin:0rpx 3%;margin-top: 20rpx;float: left;">
					<video v-if="is_son==0&&item.url" id="myVideo" :initial-time="0"  autoplay="true" loop="true" style="width: 160px;z-index: 2; margin-left: 0%; height: 160px;"
						:enable-play-gesture="true" object-fit="fill"
						:src="item.url"
						:poster="item.url +'?x-oss-process=video/snapshot,t_1000,f_jpg,w_640,h_640'" objectFit="container">
					</video>
					<video v-if="is_son==1&&item" id="myVideo" :initial-time="0"  autoplay="true" loop="true" style="width: 160px;z-index: 2; margin-left: 0%; height: 160px;"
						:enable-play-gesture="true" object-fit="fill"
						:src="IMAGE_URL+item"
						:poster="IMAGE_URL+item +'?x-oss-process=video/snapshot,t_1000,f_jpg,w_640,h_640'" objectFit="container">
					</video>
				</view>
				<view style="clear: both;"></view>
			</view>
			
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<text style="font-weight: bold;font-size:32rpx;">{{text.submit_user}} </text>
				<view >
					<image :src="IMAGE_URL+order.release_user.avatar" class="close_image2"></image>
					<view style="line-height: 140rpx;float: left;">
						<block v-if="lang==='zh'">{{order.release_user.username}}</block>
						<block v-if="lang==='ru'">{{order.release_user.username_ru}}</block>
					</view>
					<view @click="chat_fabu(order.release_user.mobile)" v-if="is_chat&&(order.release_user.id!=order.user_id)" style="line-height: 140rpx;float: right;">
						<text style="background-color: orange;color: #fff;border-radius: 10rpx;padding: 5px 10px;">
							{{ $t('即时联系') }} 
						</text>
					</view>
					<view style="clear: both;"></view>
					
					<view class="flex" style="margin-top: 10rpx;padding-bottom: 20rpx;color: #999;">
						<view style="width: 50%;float: left; text-align: left;" >
							{{timestampToDate(afterSalesRecord.createtime*1000)}}
						</view>
						<!-- <view v-if="is_time" style="width: 50%;float: right; text-align: right; color: #ff2323;" >
							{{text.automatic_agree}}
						</view> -->
					</view>
					<view style="clear: both;"></view>
					
				</view>
			</view>
			
			
			
		</view>
	</view>
</template>

<script>
	import {HTTP_REQUEST_URL,HTTP_IMG_UTL,IMAGE_URL} from "@/config/app";
	import {
		ImageUrl,
		isVideo,
		time,createC2CConversation
	} from "@/common/public";
	export default {
		props:{
			order:{
				type:Object,
				default:{}
			},
			afterSalesRecord:{
				type:Object,
				default:{}
			},
			is_time:{
				type:Boolean,
				default:true
			},
			is_chat:{
				type:Boolean,
				default:false
			},
			text:{
				type:Object,
				default:{}
			},
			is_son:{
				type:Number,
				default:0
			},
			customStyle1:{
				type:Object,
				default:{}
			},
			customStyle11:{
				type:Object,
				default:{}
			},
			customStyle2:{
				type:Object,
				default:{}
			},
			customStyle3:{
				type:Object,
				default:{}
			},
		},
		data() {
			return {
				//远程域名
				HTTP_IMG_UTL,
				HTTP_REQUEST_URL,
				IMAGE_URL,
				url: IMAGE_URL,
				
				//语言
				lang: this.$i18n.locale,
				
				img:HTTP_IMG_UTL+'huangjin.png',
				subDisabled:false,
				order_type:''
				
			}
		},
		mounted(){
			console.log(this.afterSalesRecord)
			//goods=货物,transport=运输,crossborder=跨境货代,professional=专业代办
			if(this.order.orderInfo.type=='goods'){
				this.order_type=this.$t('货物')
			}else if(this.order.orderInfo.type=='transport'){
				this.order_type=this.$t('运输')
			}else if(this.order.orderInfo.type=='crossborder'){
				this.order_type=this.$t('跨境货代')
			}else if(this.order.orderInfo.type=='professional'){
				this.order_type=this.$t('专业代办')
			}
		},
		methods:{
			downLoadFile(url) {
				const that = this
				uni.showLoading({
					title:"download...",
					mask:true
				})
				console.log('下载链接', this.IMAGE_URL + url)
				var downloadTask = uni.downloadFile({
					url: that.IMAGE_URL + url,
					success(res) {
						uni.hideLoading()
						console.log('tempFilePath', res.tempFilePath)
						const tempFilePath = res.tempFilePath
						uni.openDocument({
							filePath: tempFilePath,
							showMenu: true,
							success: function(file) {
								console.log('file-success', file);
							}
						});
					},
				})
				downloadTask.onProgressUpdate(({progress,totalBytesWritten,totalBytesExpectedToWrite}) => {
					if(progress === 100){
						downloadTask.offProgressUpdate();
					}
				})
			},
			timestampToDate(timestamp) {
			  const date = new Date(timestamp); // 如果timestamp是数值，可以直接作为Date构造函数的参数
			  const year = date.getFullYear();
			  const month = (date.getMonth() + 1).toString().padStart(2, '0');
			  const day = date.getDate().toString().padStart(2, '0');
			  const hours = date.getHours().toString().padStart(2, '0');
			  const minutes = date.getMinutes().toString().padStart(2, '0');
			  const seconds = date.getSeconds().toString().padStart(2, '0');
			  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			chat_fabu(mobile){
				createC2CConversation(mobile, this)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cardBox {
		width: 94%;
		margin: 0 auto;
		margin-top: 30rpx;
		box-shadow: 0 0 10px #ddd;
		background: #ddd;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 30rpx;
		position: relative;
	}
	
	.cardBox_son{
		width: 100%;
		margin: 0 auto;
		margin-top: 30rpx;
		box-shadow: 0 0 10px #ddd;
		background: #ddd;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 30rpx;
		position: relative;
	}
	
	.flex{width: 100%;display: flex;}
	.biao{margin-top: 0rpx; width: 80%; margin-left: 0rpx;font-size: 30rpx;  font-weight: bold;}
	.biao_span{color:darkorange ; font-size: 18px; margin-right: 5px;}
	.cardTitle{font-size: 24rpx; width: 94%;padding-top: 6rpx;}
	.order_img{width: 160rpx;height: 160rpx;border-radius: 20rpx;}
	.close_image2{
		width: 120rpx;height: 120rpx;border-radius: 20rpx; margin-right: 20rpx; margin-top: 20rpx; float: left;
	}
</style>